import React, { Component } from 'react'

// 每个因子的结构
interface IFatorItem {
  factorid: number,
  name: string,
  show: number,
  evaluation_criteria: number,
  demarcation_score: number,
  unscrambles: { code: number, min: number, max: number, content: string }[]
}

// 因子列表
const list: IFatorItem[] = [
  {
    factorid: 2718974317,
    name: '因子1',
    show: 1,
    evaluation_criteria: 1,
    demarcation_score: 60,
    unscrambles: [{ code: 1212, min: 20, max: 30, content: '和欧俄劈腿业务1' },
      { code: 12121, min: 30, max: 40, content: '和欧俄劈腿业务2' }]
  },
  {
    factorid: 27189743178,
    name: '因子1',
    show: 0,
    evaluation_criteria: 1,
    demarcation_score: 90,
    unscrambles: [{ code: 121278, min: 20, max: 30, content: '和欧俄劈腿业务1' },
      { code: 121267, min: 30, max: 40, content: '和欧俄劈腿业务2' }]
  }
]

// 每条解读的结构
interface AnalysisItem {
  code?: number,
  min: number,
  max: number,
  content: string
}

interface Plan1State {
  list: Array<IFatorItem>
}

interface FactorCardProps {
  factor: IFatorItem
  index: number
  FactorCardChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void
  analysisChange: (e: React.ChangeEvent<HTMLInputElement>, FactorIndex: number, analysisIndex: number) => void
  analysisAdd: (index: number) => void
}

interface analysisProps {
  analysis: AnalysisItem
  FactorIndex: number
  analysisIndex: number
  analysisChange: (e: React.ChangeEvent<HTMLInputElement>, FactorIndex: number, analysisIndex: number) => void
}

// 单条解读
class SingleAnalysis extends Component<analysisProps, Record<string, unknown>> {
  constructor(props: analysisProps) {
    super(props)
  }
  analysisChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    this.props.analysisChange(e, this.props.FactorIndex, this.props.analysisIndex)
  }
  render(): JSX.Element {
    const analysis = this.props.analysis
    return (<>
      <li>
        <p>当（得分 - 划界分）在</p>
        <input type="text" name="min" value={analysis.min} onChange={this.analysisChange} />
        ～ <input type="text" name="max" value={analysis.max} onChange={this.analysisChange} />
      </li>
      <li>
        <p>之间，则显示</p>
        <input type="textarea" name="content" value={analysis.content} onChange={this.analysisChange} />
      </li>
    </>)
  }
}


// 因子card
class FactorCard extends Component<FactorCardProps, Record<string, unknown>> {
  constructor(props: FactorCardProps) {
    super(props)
  }
  // 因子里的的change事件
  FactorCardChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    this.props.FactorCardChange(e, this.props.index)
  }
  render(): JSX.Element {
    const factor = this.props.factor
    return (<ul>
      <h2>{factor.name}</h2>
      <li>
        <input type="checkbox" name="show" value={factor.show} onChange={this.FactorCardChange} />是否在结果中显示
      </li>
      <li>
        <input type="radio" name="evaluation_criteria" value={factor.evaluation_criteria} onChange={this.FactorCardChange} />越高越好
        <input type="radio" name="evaluation_criteria" value={factor.evaluation_criteria} onChange={this.FactorCardChange} />越低越好
      </li>
      <li>
        <p>总分划界分（满分：100）</p>
        <input type="text" name="demarcation_score" value={factor.demarcation_score} onChange={this.FactorCardChange} />
      </li>
      <p>解读</p>
      {
        factor.unscrambles.map((item, i) => {
          return <SingleAnalysis analysis={item} key={item.code} FactorIndex={this.props.index} analysisIndex={i} analysisChange={this.props.analysisChange} />
        })
      }
      <li onClick={() => this.props.analysisAdd(this.props.index)}>新增一条解读</li>
    </ul>)
  }
}

// 最外层
class Plan1 extends Component<Record<string, unknown>, Plan1State> {
  constructor(props: Record<string, unknown>) {
    super(props)
    this.state = {
      list
    }
  }
  // 因子里的的change事件
  FactorCardChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
    const { value, name } = e.target
    const list: IFatorItem[] = this.state.list
    list[index] = { ...list[index], [name]: value }
    this.setState({ list })
  }
  // 解读里的change事件
  analysisChange = (e: React.ChangeEvent<HTMLInputElement>, FactorIndex: number, analysisIndex: number): void => {
    const { value, name } = e.target
    const list: IFatorItem[] = this.state.list
    const old = list[FactorIndex].unscrambles[analysisIndex]
    list[FactorIndex].unscrambles[analysisIndex] = { ...old, [name]: value }
    this.setState({ list })
  }
  // 新增一条解读
  analysisAdd = (index: number): void => {
    const list: IFatorItem[] = this.state.list
    list[index].unscrambles.push({
      code: 0,
      min: 0,
      max: 0,
      content: ''
    })
    this.setState({ list })
  }
  // 提交
  submit = (): void => {
    console.log(888, this.state.list)
  }
  render(): JSX.Element {
    return (<div>
      {
        this.state.list.map((item, i) => {
          return <FactorCard factor={item} key={item.factorid} index={i} FactorCardChange={this.FactorCardChange} analysisChange={this.analysisChange} analysisAdd={this.analysisAdd} />
        })
      }
      <input type="button" value="确定" onClick={() => this.submit()} />
    </div>)
  }
}

export default Plan1